import * as React from 'react';
import { useState, useEffect } from 'react';
import './list.less';
import { history } from 'umi';

export default function list(props: any) {
  const title = props.title;
  const list = props.list;
  const styleObj = props.styleObj;
  const goDetail = (id: Number) => {
    history.push(`/index/detail/${id}`);
  };
  return (
    <div
      className="bigBox"
      style={{
        color: styleObj.color,
        backgroundImage: `url(${styleObj.backgroundImage})`,
      }}
    >
      <div
        className="content"
        style={{
          backgroundColor: styleObj.backgroundImage
            ? 'none'
            : styleObj.backgroundColor,
        }}
      >
        <div className="title">
          <p>{props.title}</p>
        </div>
        <ul className="content">
          {list.map((item: any, index: any) => {
            return (
              <li key={item.id}>
                <span> {index + 1}. </span>
                <p>{item.msg}</p>
              </li>
            );
          })}
        </ul>
        <div className="bottom">
          <button
            onClick={() => {
              goDetail(1);
            }}
          >
            更多&gt;&gt;&gt;
          </button>
        </div>
      </div>
    </div>
  );
}
